<style type="text/css">
	#star{position:relative;width:40px;margin:0px auto;height:24px;display: inline;}
	#star ul,#star span{list-style-type:none;display:inline;height:19px;line-height:19px;}
	#star ul{margin:0px;}
	#star li{list-style-type: none;float:left;width:18px;cursor:pointer;text-indent:-9999px;background:url(img/star.png) no-repeat;}
	#star strong{color:#f60;padding-left:10px;}
	#star li.on{background-position:0 -28px;}
</style>
	<div class='menu-header' >		
        <i class='fa fa-suitcase fa-2x' style="margin:10px"></i>主题列表
	    	<select name="theme" onchange="getThemeInfo()"">
		 		<option value="0">所有</option>
   		 		<option value="1">已删除主题</option>
  	 		</select>
       	<div class='tools'>
       		<div class='btn-group'>
       			<a class='btn' onclick="createTheme()" title='新增'>
                  <i class='fa fa-plus fa-2x'></i>
                </a>
       			<a class='btn' onclick="getThemeInfo()" title='刷新'>
                  <i class='fa fa-rotate-left (alias) fa-2x'></i>
                </a>
       		</div>       		
       	</div>
    </div>
    <div class="menu-body" style="margin:0px 10px;float:left;width:99%">
    </div>
<script type="text/html" id="lst_theme_js">
{{if list==null || list.length==0 }}
	<div style="color: gray;text-align: center;">暂无数据</div>
{{else}}
{{each list as value index}}
	<div  style="border:1px solid #ccc;margin:5px;width:350px;float:left;">
      <a href="#" class="thumbnail">
         <img src="{{value.coverImg}}" >
	 </a>
       <div class="caption" style="margin:5px;">
            <p>{{value.themeName}}</p>
            <p>{{value.size}};{{value.content}};{{value.category}}</p>
        <table class="theme-table" style="width:320px;margin:5px;">
		<tbody id="theme-tbody">
			<tr><th style="width:40px;">难度:</th><th style="width:100px;">
				 <div id="star">
					<ul>
						<li class="{{if value.diffStar>=1}}on{{/if}}"><a href="javascript:;">1</a></li>
						<li class="{{if value.diffStar>=2}}on{{/if}}"><a href="javascript:;">2</a></li>
						<li class="{{if value.diffStar>=3}}on{{/if}}"><a href="javascript:;">3</a></li>
						<li class="{{if value.diffStar>=4}}on{{/if}}"><a href="javascript:;">4</a></li>
						<li class="{{if value.diffStar>=5}}on{{/if}}"><a href="javascript:;">5</a></li>
					</ul>
				</div>
			</th>
				<th style="width:40px;">逻辑:</th><th>
					<div id="star">
					<ul>
						<li class="{{if value.logicStar>=1}}on{{/if}}"><a href="javascript:;">1</a></li>
						<li class="{{if value.logicStar>=2}}on{{/if}}"><a href="javascript:;">2</a></li>
						<li class="{{if value.logicStar>=3}}on{{/if}}"><a href="javascript:;">3</a></li>
						<li class="{{if value.logicStar>=4}}on{{/if}}"><a href="javascript:;">4</a></li>
						<li class="{{if value.logicStar>=5}}on{{/if}}"><a href="javascript:;">5</a></li>
					</ul>
				</div>
				</th>
			</tr>
			<tr><th>动作:</th><th>
				<div id="star">
					<ul>
						<li class="{{if value.actionStar>=1}}on{{/if}}"><a href="javascript:;">1</a></li>
						<li class="{{if value.actionStar>=2}}on{{/if}}"><a href="javascript:;">2</a></li>
						<li class="{{if value.actionStar>=3}}on{{/if}}"><a href="javascript:;">3</a></li>
						<li class="{{if value.actionStar>=4}}on{{/if}}"><a href="javascript:;">4</a></li>
						<li class="{{if value.actionStar>=5}}on{{/if}}"><a href="javascript:;">5</a></li>
					</ul>
				</div>
			</th>
				<th>场景:</th><th>
					<div id="star">
					<ul>
						<li class="{{if value.sceneStar>=1}}on{{/if}}"><a href="javascript:;">1</a></li>
						<li class="{{if value.sceneStar>=2}}on{{/if}}"><a href="javascript:;">2</a></li>
						<li class="{{if value.sceneStar>=3}}on{{/if}}"><a href="javascript:;">3</a></li>
						<li class="{{if value.sceneStar>=4}}on{{/if}}"><a href="javascript:;">4</a></li>
						<li class="{{if value.sceneStar>=5}}on{{/if}}"><a href="javascript:;">5</a></li>
					</ul>
				</div>
				</th>
			</tr>
		</tbody>
		</table>
		<div class="content-item" style="width:300px;height:60px;margin:5px;">
			{{if value.status ==0}}
			<div style="padding-top:10px;width:150px;float:left;">
            	<button type="button" class="btn btn-success" onclick="deleteTheme({{value.themeId}})">删除主题</button>
            </div>
			{{else}}
			<div style="padding-top:10px;width:150px;float:left">
            	<button type="button" class="btn btn-success" onclick="recoverTheme({{value.themeId}})">恢复主题</button>
            </div>
			{{/if}}
            <div style="padding-top:10px;width:150px;float:left">
            	<button type="button" class="btn btn-success" onclick="modifyTheme({{value.themeId}})">修改主题</button>
            </div>
   		</div>	
   </div>
</div>
	{{/each}}
{{/if}}
</script>
<script type="text/javascript">
	$(function(){
		getThemeInfo();
	});
	function createTheme(){
		$("#menuPage").empty().load("html/theme_detail.html");
	}
	function getThemeInfo(){
		$("#themeData").empty();
		var type=document.getElementsByName("theme")[0].value;
		callSvr("theme/getShopThemeInfo",{type:type},function(result){
			var data = {
				list: result
			};
			var html = template('lst_theme_js', data);
			$(".menu-body").html(html);
		});
	}
	function showTheme(themeId){
		themeId = themeId;
		$("#content").empty().load("html/theme_detail.html");
	};
	
	var theme_Id = "";
	function modifyTheme(themeId){
		theme_Id = themeId;
		$("#menuPage").empty().load("html/theme_detail.html");
	}
	function deleteTheme(themeId){
		callSvr("theme/deleteTheme",{themeId:themeId},function(result){
			getThemeInfo();
		});
	}
	function recoverTheme(themeId){
		callSvr("theme/recoverTheme",{themeId:themeId},function(result){
			getThemeInfo();
		});
	};
</script>
